<template>
  <div>
    <div class="bigbox">
     <div class="header">
      <h1 @click="fun()">&lt;</h1>
      <h2>权益专区</h2>       
     </div>
     <div class="lunbotu">
       <Yswipe/>
     </div>
     <div class="huichi">
       <div class="huichi-con">
         <div>惠吃</div>丨
         <div>乐玩</div>丨
         <div>优行</div>丨
         <div>享住</div>
       </div>
     </div>
     <div class="xianshiyouhui">
      <div class="xianshiyouhui-con">
        <img src="img/yueimg/9.jpg">
      </div>
     </div>
     <div class="quanyichangxiao">
       <div class="quanyichangxiao-con">
         <div class="quanyichangxiao-con-a">
           <h3>&nbsp;&nbsp;权益畅销榜&nbsp;</h3>
           <span>最低一份钱起</span>
           <div class="quanyichangxiao-con-a-right">去领权益&nbsp;&nbsp;>&nbsp;&nbsp;</div>
         </div>
         <div class="quanyichangxiao-con-b">
           <div><img src="img/yueimg/92.jpg" alt=""><br><span>会员+流量</span><br><span>首月1分钱</span></div>
           <div><img src="img/yueimg/93.jpg" alt=""><br><span>月月领会员</span><br><span>限时15.9元</span></div>
           <div><img src="img/yueimg/94.jpg" alt=""><br><span>暖心7天包</span><br><span>5GB通用流量</span></div>
         </div>
       </div>
     </div>
     <div class="fudai">
       <div class="fudai-con">
         <div class="fudai-con-a">
           <h3>&nbsp;&nbsp;0元福袋&nbsp;</h3>
           <span>会员尊享</span>
           <div class="fudai-con-a-right">+1元升铂金会员&nbsp;&nbsp;>&nbsp;&nbsp;</div>
         </div>
         <div class="fudai-con-b">
           <div><img src="img/yueimg/95.jpg" alt=""><br><span>网易云月卡</span><br><span>5折价&nbsp;&nbsp;￥8</span></div>
           <div><img src="img/yueimg/96.jpg" alt=""><br><span>美团代金券</span><br><span>5折价&nbsp;&nbsp;￥5</span></div>
           <div><img src="img/yueimg/97.jpg" alt=""><br><span>10元代金券</span><br><span>5折价&nbsp;&nbsp;￥5</span></div>
           <div><img src="img/yueimg/98.jpg" alt=""><br><span>腾讯视频月卡</span><br><span>5折价&nbsp;&nbsp;￥15</span></div>
           <div><img src="img/yueimg/99.jpg" alt=""><br><span>爱奇艺月卡</span><br><span>5折价&nbsp;&nbsp;￥15</span></div>
           <div><img src="img/yueimg/100.jpg" alt=""><br><span>优酷视频月卡</span><br><span>5折价&nbsp;&nbsp;￥10</span></div>
         </div>
       </div>
     </div>
     <div class="xianshicuxiao">
       <div class="xianshicuxiao-con">
         <div class="xianshicuxiao-con-a">
           <h3 @click="funb('Xianshicuxiao')">限时促销</h3>
           <h3 @click="funb('Bendifuli')">本地福利</h3>
           <h3 @click="funb('Zuiduorenmai')">最多人买</h3>
           <h3 @click="funb('Yiyuanzhuanqu')">一人专区</h3>
         </div>
        <!-- <Xianshicuxiao/>
        <Bendifuli/>
        <Zuiduorenmai/>
        <Yiyuanzhuanqu/> -->
        <component :is="com"></component>
       </div>
     </div>
    </div>    
  </div>
</template>

<script>
import Yswipe from "@/components/yue/yswipe.vue"
import Xianshicuxiao from "@/components/yue/xianshicuxiao.vue"
import Bendifuli from "@/components/yue/bendifuli.vue"
import Zuiduorenmai from "@/components/yue/zuiduorenmai.vue"
import Yiyuanzhuanqu from "@/components/yue/yiyuanzhuanqu.vue"
export default {
  data(){
    return {
      com:"Xianshicuxiao"
    }
  },

  components:{
    Yswipe,Xianshicuxiao,Bendifuli,Zuiduorenmai,Yiyuanzhuanqu
  },

  methods:{
    fun(){
      this.$router.go(-1)
    },
    funb(val){
      this.com=val
    }
  }
}
</script>

<style scoped>
.bigbox{
  overflow: hidden;
}

.header{
  width: 100%;
  background-color: white;
  height: 0.77rem;
  line-height: 0.77rem;
  position: fixed;
  border-bottom: 1PX solid gray;
  z-index: 9999;
}

.header h1,h2{
  float: left;
}

.header h2{
  margin-left:1.3rem;
}

.lunbotu{
  margin-top: 0.96rem;
}

.huichi{
  width: 100%;
}

.huichi .huichi-con{
  width: 3.32rem;
  height: 0.13rem;
  margin: auto;
  margin-top: 0.08rem;
  margin-bottom: 0.14rem;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.08rem;
  color: #d2d2d2;
}

.xianshiyouhui{
  width: 100%;
}

.xianshiyouhui .xianshiyouhui-con{
  width: 3.32rem;
  height: 0.72rem;
  margin: auto;
}

.xianshiyouhui .xianshiyouhui-con img{
  width: 100%;
  height: 100%;
}

.quanyichangxiao {
  width: 100%;
}

.quanyichangxiao .quanyichangxiao-con{
  width: 3.32rem;
  height: 1.58rem;
  margin: auto;
  margin-top: 0.09rem;
  margin-bottom: 0.09rem;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-a{
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-a h3{
  float: left;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-a span{
  display: block;
  float: left;
  font-size: 0.08rem;
  color: red;
 
}


.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-a .quanyichangxiao-con-a-right{
  float: right;
  font-size: 0.08rem;
  color: #6d6d6d;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-b{
  width: 3.32rem;
  height: 1rem;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-b span{
  font-size: 0.01rem;
}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-b img{
  width: 0.33rem;
  height: 0.33rem;
  margin-top: 0.19rem;

}

.quanyichangxiao .quanyichangxiao-con .quanyichangxiao-con-b div{
  width: 0.98rem;
  height: 0.98rem;
  background-color: #f7f8fa;
}

.fudai{
  width: 100%;
}

.fudai .fudai-con{
  width: 3.32rem;
  height: 2.94rem;
  margin: auto;
  background-color: #f9ecdc;
  border-radius: 0.1rem;
}

.fudai .fudai-con .fudai-con-a{
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
}

.fudai .fudai-con .fudai-con-a h3{
  float: left;
}

.fudai .fudai-con .fudai-con-a span{
  display: block;
  float: left;
  font-size: 0.08rem;
  color: red;
 
}


.fudai .fudai-con .fudai-con-a .fudai-con-a-right{
  float: right;
  font-size: 0.08rem;
  color: #6d6d6d;
}

.fudai .fudai-con .fudai-con-b{
  width: 3.08rem;
  height: 2.37rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}

.fudai .fudai-con .fudai-con-b img{
  width: 0.33rem;
  height: 0.33rem;
  margin-top: 0.16rem;
}

.fudai .fudai-con .fudai-con-b span{
  font-size: 0.1rem;
}

.fudai .fudai-con .fudai-con-b div{
  width: 0.99rem;
  height: 1.14rem;
  background-color: white;
}

.xianshicuxiao{
  width: 100%;
}

.xianshicuxiao .xianshicuxiao-con{
  width: 3.32rem;
  margin: auto;
  margin-top: 0.13rem;
  
}

.xianshicuxiao .xianshicuxiao-con .xianshicuxiao-con-a{
  display: flex;
  justify-content: space-between;
}

.xianshicuxiao .xianshicuxiao-con .xianshicuxiao-con-b{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
</style>